import Vue from 'vue'
// import Vuex from 'vuex'
import Vuex from './myvuex'

Vue.use(Vuex)
// use(函数) 直接把函数当作install执行 并传递一个Vue
// use(对象) 直接执行 对象中的install方法 并传递一个Vue
/* 
  vuex 是用来解决 组件之间的数据交互的；
  一旦 把vuex实例注入到 根实例之后  那么 每一个组件 上都会有 $store
  mapState 其实 就是把 state中的属性是映射到 computed中
  mapMutations 就是把 mutations中的方法映射到 组建的 methods中；
*/
let a = {
  state:{
    age:100
  },
  mutations:{
    //这里的函数名跟 根vuex实例中的mutations函数名重复 会怎么样？
    changeA(state,option){
      console.log(arguments)
      state.age += option
    }
  }
}
export default new Vuex.Store({
  state: {
    // 这里放的式 公用   数据
    // 在组件中 使用 state中的数据 我们一般使用 计算属性接收
    count:100
  },
  mutations:{
    // 这里边都是函数；这些函数 都是用来修改state中状态的
    // 想要触发这里边的函数 需要通过 this.$store.commit(changeCount,666)
    changeCount(state,option){
      // state 对应的就是 我们共用状态  option式执行这个函数时传递的值
      // 这些函数最多之后俩参数 最少一个
      // this 都是 vuex实例
      console.log(arguments)
      state.count += option
    }
  },
  actions:{
    // 这里边的函数 最终 都会触发 mutations中的函数、这些函数中 
    //    原则上 不能直接修改state中的数据
    // 想要出发这些函数 需要通过 this.$store.dispatch(changeCount,666)
    changeCount(store,option){
      setTimeout(() => {
        store.commit('changeCount',option)
      }, 2000);
      // console.log(arguments)
    }
  },
  getters:{
    /// 就是 vuex的计算属性
    type(state){
      return state.count %2 ? '奇数' : '偶数'
    }
  },
  // modules:{
  //   aaa:a
  // }
  
})
